<template>
	<div class="race-group-index">
		<div class="top-search-wrapper">
			<el-button type="primary" @click="go2Add" size="small">新增奖项</el-button>
			<div>
				<el-input v-model="key" style="width: 300px;margin-right: 10px;" clearable placeholder="请输入关键字进行搜索"
					size="small" />
				<el-button type="primary" @click="go2Query" size="small">查询</el-button>
			</div>
		</div>
		<el-divider />
		<div class="table-content-wrapper">
			<el-table :data="tableData" style="width: 100%">
				<el-table-column prop="name" label="奖项名称" align="center" header-align="center" />
				<el-table-column prop="limitAmount" label="奖项人数" align="center" header-align="center" />
				<el-table-column prop="prizeAmount" label="已获奖人数" align="center" header-align="center" />
				<el-table-column prop="sex" label="操作" header-align="center" align="center" min-width="120px">
					<template slot-scope="scope">
						<el-button type="text" size="mini" icon="el-icon-edit" @click="go2Edit(scope.row)">编辑
						</el-button>
						<el-button type="text" size="mini" icon="el-icon-delete" @click="go2Del(scope.row)">
							删除</el-button>
						<el-button type="text" size="mini" icon="el-icon-view" @click="go2ShowUsers(scope.row)">查看获奖用户
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination style="margin-top: 15px;text-align: right;" :current-page="page.page_no"
				:page-sizes="[10, 20, 30, 50, 100]" :page-size="page.page_size"
				layout="total, sizes, prev, pager, next, jumper" :total="page.total" @size-change="handleSizeChange"
				@current-change="handleCurrentChange" />
		</div>
		<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="45%" :before-close="handleClose"
			append-to-body>
			<add-or-edit v-if="dialogVisible" :origin-data="currentSelect" :raceId="raceId" @close="go2Close" />
		</el-dialog>

		<el-dialog title="获奖用户信息" :visible.sync="dialogUserVisible" width="80%" :before-close="handleUserClose"
			append-to-body>
			<userInfo v-if="dialogUserVisible" :prizeName="currentSelect.name" :prizeId="currentSelect.id" :raceId="raceId" @close="go2Close" />
		</el-dialog>
	</div>
</template>

<script>
	import addOrEdit from './addOrEdit.vue'
	import userInfo from './userInfo.vue'

	import {
		fetchRaceList,
		deleteById
	} from '@/api/meiyu/racePrize.js'

	export default {
		components: {
			addOrEdit,
			userInfo
		},
		props: {
			raceId: {
				type: Number,
				default: undefined
			},
		},
		data() {
			return {
				key: '',
				tableData: [],
				dialogVisible: false,
				dialogTitle: '提示',
				page: {
					page_no: 1,
					page_size: 10,
					total: 0
				},
				currentSelect: {},
				dialogUserVisible: false
			}
		},
		mounted() {
			this.go2Query()
		},
		methods: {
			handleSizeChange(val) {
				this.page.page_size = val
				this.go2Query()
			},
			handleCurrentChange(val) {
				this.page.page_no = val
				this.go2Query()
			},
			go2ShowUsers(item) {
				this.currentSelect = {
					...item
				}
				this.dialogUserVisible = true
			},
			go2Query() {
				const loading = this.$loading({
					lock: true,
					text: '加载中',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				})
				const params = {
					page_no: this.page.page_no,
					page_size: this.page.page_size,
					name: this.key,
					race_id: this.raceId
				}
				fetchRaceList(params).then((res) => {
					loading.close()
					if (res.code === 200) {
						const message = res.data
						this.tableData = message.items
						this.page.total = message.total
					}
				}).catch((error) => {
					loading.close()
					console.log(error)
				})
			},
			go2Edit(data) {
				this.dialogTitle = '编辑'
				this.currentSelect = {
					...data
				}
				this.dialogVisible = true
			},
			go2Del(row) {
				this.$confirm('此操作将会删除所有数据，是否删除?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					const loading = this.$loading({
						lock: true,
						text: '处理中',
						spinner: 'el-icon-loading',
						background: 'rgba(0, 0, 0, 0.7)'
					})
					deleteById(row.id).then((res) => {
						loading.close()
						const message = res.message
						this.$message.success('删除数据成功')
						this.go2Query()
					}).catch((error) => {
						loading.close()
						console.log(error)
					})
				}).catch((err) => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					})
				})
			},
			go2Add() {
				this.dialogTitle = '新增'
				this.currentSelect = {}
				this.dialogVisible = true
			},
			handleClose() {
				this.dialogVisible = false
			},
			handleUserClose(){
				this.dialogUserVisible = false
			},
			go2Close() {
				this.dialogVisible = false
				this.go2Query()
			}
		}
	}
</script>

<style lang="scss">
	.race-group-index {
		padding: 10px;

		.top-search-wrapper {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.table-content-wrapper {
			// margin-top: 15px;
		}

		.el-divider--horizontal {
			margin: 15px 0;
		}

	}
</style>